<!DOCTYPE html>
<html>
<head>
  <title>Deezloader Remix</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" type="text/css" href="css/material-icons.css"/>
  <link rel="stylesheet" type="text/css" href="css/materialize.min.css"/>
  <link rel="stylesheet" type="text/css" href="css/animate.css">
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <link rel="stylesheet" type="text/css" href="css/darkMode.css" name="darkMode" disabled/>
  <script type='text/javascript'>
    if (eval(localStorage.darkMode)){
      document.getElementsByName("darkMode")[0].removeAttribute("disabled");
    }
  </script>
  <meta charset="utf-8"/>
</head>
<body>
<span id="appVersionFallback" hidden>4.1.6</span>

<div id="title-bar" class="deezloader-black">
	<div class="resize-padding" style="width: 100%; height: 3px;"></div>
	<div class="resize-padding" style="width: 3px; height: 31px;"></div>
	<div id="title">Deezloader Remix v<span id="application_version"></span></div>

	<div id="title-bar-btns">
		<button id="min-btn"><i class="material-icons">remove</i></button>
		<button id="max-btn"><i class="material-icons">add</i></button>
		<button id="close-btn"><i class="material-icons">close</i></button>
	</div>

	<div class="resize-padding" style="position: absolute; top:0; right:0px; width: 3px; height: 31px;"></div>
</div>

<!--#############################################INITIALIZING-SCREEN############################################-->
<div id="initializing" class="deezloader-black valign-wrapper">
	<div class="modal-content container" id="login-page">
		<div class="card">
			<div class="card-content">
				<span class="card-title">Please login to your deezer account.</span>
				<h6 class="red-text" id="login-res-text"></h6>
				<div class="input-field col s12">
					<input autocomplete="off" type="text" id="modal_login_input_username"/>
					<label for="modal_login_input_username">Email</label>
				</div>
				<div class="input-field col s12">
					<input autocomplete="off" type="password" id="modal_login_input_password"/>
					<label for="modal_login_input_password">Password</label>
				</div>
			</div>
			<div class="card-action row">
        <div class="col s12 m2 right center" id="modal_login_autologin">
          <label>
            <input type="checkbox" class="filled-in" id="modal_login_input_autologin"/>
            <span>Remember me</span>
          </label>
				</div>
				<a href="#" class="deezloader-primary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_login">Log in</a>
				<a href="#" class="deezloader-secondary col s12 m2 waves-effect waves-light btn" id="modal_login_btn_signup">Sign up</a>
			</div>
		</div>
	</div>
</div>

<!--#############################################MODAL_SETTINGS############################################-->
<div id="modal_settings" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">Settings</h4>
		</div>
		<div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_trackNameTemplate"/>
				<label for="modal_settings_input_trackNameTemplate">Track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
			</div>
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_playlistTrackNameTemplate"/>
				<label for="modal_settings_input_playlistTrackNameTemplate">Playlist track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
			</div>
		</div>
    <div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_albumTrackNameTemplate"/>
				<label for="modal_settings_input_albumTrackNameTemplate">Album track names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %number%, %year%, %artist%, %title%, %album%, %explicit% and %label%">info_outline</i></label>
			</div>
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_albumNameTemplate"/>
				<label for="modal_settings_input_albumNameTemplate">Album names <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %year%, %artist%, %type%, %album%, %explicit% and %label%">info_outline</i></label>
			</div>
		</div>
    <div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_coverImageTemplate"/>
				<label for="modal_settings_input_albumTrackNameTemplate">Cover Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %artist% and %name%">info_outline</i></label>
			</div>
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_artistImageTemplate"/>
				<label for="modal_settings_input_albumNameTemplate">Artist Image name <i class="material-icons valignicon tiny tooltipped" data-position="right" data-delay="50"
          data-tooltip="Supported variables are: %artist%">info_outline</i></label>
			</div>
		</div>
		<div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="artworkSize" id="modal_settings_select_artworkSize">
          <option value="1400">1400x1400</option>
          <option value="1200">1200x1200</option>
          <option value="1000">1000x1000</option>
          <option value="800">800x800</option>
          <option value="500">500x500</option>
          <option value="250">250x250</option>
				</select>
				<label for="modal_settings_select_artworkSize">Artwork size</label>
			</div>
      <div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="maxBitrate" id="modal_settings_select_maxBitrate">
          <option value="9">FLAC 1411kbps</option>
          <option value="3">MP3 320kbps</option>
          <option value="1">MP3 128kbps</option>
				</select>
				<label for="modal_settings_select_maxBitrate">Preferred bitrate</label>
			</div>
		</div>
    <div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="chartsCountry" id="modal_settings_select_chartsCounrty">
				</select>
				<label for="modal_settings_select_chartsCounrty">Default Country for Charts</label>
			</div>
    	<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="multitagSeparator" id="modal_settings_select_multitagSeparator">
					<option value="null">Null Character</option>
					<option value=",">,</option>
					<option value=", ">, with space</option>
					<option value="/">/</option>
					<option value=" / ">/ with space</option>
					<option value=";">;</option>
					<option value="; ">; with space</option>
				</select>
				<label for="modal_settings_select_multitagSeparator">Multitag Separator</label>
			</div>
		</div>
    <div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="dateFormat" id="modal_settings_select_dateFormat">
					<option value="0">YMD</option>
					<option value="1">DMY</option>
					<option value="2">MDY</option>
					<option value="3">YDM</option>
					<option value="4">ID3 Default</option>
				</select>
				<label for="modal_settings_select_dateFormat">Date Format</label>
			</div>
    	<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<select name="dateFormatYear" id="modal_settings_select_dateFormatYear">
					<option value="2">2 digit</option>
					<option value="4">4 digit</option>
				</select>
				<label for="modal_settings_select_dateFormatYear">Date Tag Year Format</label>
			</div>
		</div>
		<div class="row">
			<div class="input-field col s12">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_downloadTracksLocation"/>
				<label for="modal_settings_input_downloadTracksLocation">Download location</label>
			</div>
		</div>
    <div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="number" id="modal_settings_number_queueConcurrency" min="1"/>
				<label for="modal_settings_number_queueConcurrency">Concurrent Download Limit</label>
			</div>
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="number" id="modal_settings_number_paddingSize" min="0"/>
				<label for="modal_settings_number_paddingSize">Padding Size Overwrite</label>
			</div>
		</div>
		<div class="row">
			<div class="input-field col s12 m6">
				<i class="material-icons prefix">label</i>
				<input autocomplete="off" type="text" id="modal_settings_input_spotifyUser"/>
				<label for="modal_settings_input_spotifyUser">Spotify Username</label>
			</div>
		</div>
		<div class="row">
			<p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_createM3UFile" class="filled-in"/>
  				<span>Create M3U (Playlist) file</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_syncedlyrics" class="filled-in"/>
  				<span class="tooltipped" data-position="top" data-delay="500"
            data-tooltip="Downloads lyrics .lrc file">Download synced lyrics file</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_numplaylistbyalbum" class="filled-in"/>
  				<span class="tooltipped" data-position="top" data-delay="500"
            data-tooltip="Track numbers when downloading a Playlist will be the original ones">Number playlist by album</span>
        </label>
      </p>
			<p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_createArtistFolder" class="filled-in"/>
  				<span>Create folder for artists</span>
        </label>
			</p>
			<p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_createAlbumFolder" class="filled-in"/>
  				<span>Create folder for albums</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_createCDFolder" class="filled-in"/>
  				<span>Create folder for CDs</span>
        </label>
      </p>
			<p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_padtrck" class="filled-in"/>
  				<span class="tooltipped" data-position="top" data-delay="500"
            data-tooltip="Adds 0s before %number% to have the same character length">Pad track numbers</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_logErrors" class="filled-in"/>
  				<span>Create log file for Errors</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_logSearched" class="filled-in"/>
  				<span>Create log file for alternatives</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_saveArtwork" class="filled-in"/>
  				<span>Save Album Artwork</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_saveArtworkArtist" class="filled-in"/>
  				<span>Save Artist Artwork</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_PNGcovers" class="filled-in"/>
  				<span>Download images as PNGs</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_removeAlbumVersion" class="filled-in"/>
  				<span>Remove "(Album Version)" from track title</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_fallbackBitrate" class="filled-in"/>
  				<span>Fallback to lower bitrates</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
          <input type="checkbox" id="modal_settings_cbox_minimizeToTray" class="filled-in"/>
          <span>Minimize to system tray</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_saveFullArtists" class="filled-in"/>
  				<span>Save file with full artists</span>
        </label>
      </p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_settings_cbox_removeDupedTags" class="filled-in"/>
  				<span>Better removal of duplicates (BETA)</span>
        </label>
      </p>
		</div>
    <div class="row">
      <div class="col s12">
        <a href="#modal_tags" class="modal-trigger waves-effect waves-light btn btn-large" style="width:100%;">Choose which tags to Save</a>
      </div>
    </div>
		<div class="row">
			<div class="col s12">
        <img id="modal_settings_picture" src="" alt="Profile Picture" class="circle left" style="height:125px; margin-right: 12px;"/>
				<p>You are logged in as <b id="modal_settings_username"></b></p>
				<a href="#" class="modal-close waves-effect waves-light btn" id="modal_settings_btn_logout">Logout</a>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="modal-close waves-effect waves-light deezloader-primary btn" id="modal_settings_btn_saveSettings"><i
			class="material-icons right">save</i>Save</a>
		<a href="#" class="waves-effect btn-flat" id="modal_settings_btn_defaultSettings"><i
			class="material-icons right">settings_backup_restore</i>Default Settings</a>
		<a href="#" class="modal-close waves-effect btn-flat">Close</a>
	</div>
</div>

<!--#############################################MODAL_TAGS############################################-->
<div id="modal_tags" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">Saved Tags</h4>
		</div>
		<div class="row">
			<p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_title" class="filled-in"/>
  				<span>Title</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_artist" class="filled-in"/>
  				<span>Artist</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_album" class="filled-in"/>
  				<span>Album</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_cover" class="filled-in"/>
  				<span>Cover</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_trackNumber" class="filled-in"/>
  				<span>Track Number</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_trackTotal" class="filled-in"/>
  				<span>Track Total</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_discNumber" class="filled-in"/>
  				<span>Disc Number</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_discTotal" class="filled-in"/>
  				<span>Disc Total</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_albumArtist" class="filled-in"/>
  				<span>Album Artist</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_genre" class="filled-in"/>
  				<span>Genre</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_year" class="filled-in"/>
  				<span>Year</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_date" class="filled-in"/>
  				<span>Date</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_explicit" class="filled-in"/>
  				<span>Explicit</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_isrc" class="filled-in"/>
  				<span>ISRC</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_length" class="filled-in"/>
  				<span>Length</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_barcode" class="filled-in"/>
  				<span>Barcode</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_bpm" class="filled-in"/>
  				<span>BPM</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_replayGain" class="filled-in"/>
  				<span>Replay Gain</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_publisher" class="filled-in"/>
  				<span>Label</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_unsynchronisedLyrics" class="filled-in"/>
  				<span>Unsynchronised Lyrics</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_copyright" class="filled-in"/>
  				<span>Copyright</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_musicpublisher" class="filled-in"/>
  				<span>Publisher</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_composer" class="filled-in"/>
  				<span>Composer</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_mixer" class="filled-in"/>
  				<span>Mixer</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_author" class="filled-in"/>
  				<span>Author</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_writer" class="filled-in"/>
  				<span>Writer</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_engineer" class="filled-in"/>
  				<span>Engineer</span>
        </label>
			</p>
      <p class="col s12 m4">
        <label>
  				<input type="checkbox" id="modal_tags_producer" class="filled-in"/>
  				<span>Producer</span>
        </label>
			</p>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="modal-close waves-effect btn-flat">Close</a>
	</div>
</div>

<!--#############################################MODAL_ABOUT############################################-->
<div id="modal_about" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">More</h4>
		</div>
		<div class="row">
			<ul class="collapsible" data-collapsible="accordion">
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">info</i>About</div>
					<div class="collapsible-body">
						<p>
              <b>Branch: </b>Remix</br>
              <b>Version:</b> <span id="application_version_about"></span><br/>
              <b>Based on: </b>Deezloader Reborn</br>
              <b>Maintainers:</b> RemixDevs Group<br/>
              <b>Repo: </b> <a href="https://notabug.org/RemixDevs/DeezloaderRemix">Official Repo</a><br/>
              <b>Interface:</b> <a href="http://materializecss.com/">Materialize CSS</a><br/>
              <br>
              <b>Special Thanks to:</b><br>
              ZzMTV, ParadoxalManiak, snwflake, ExtendLord<br>
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">feedback</i>Feedback</div>
					<div class="collapsible-body">
						<p>
							Do you have some feedback or want to ask for some new features? Open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">new Issue</a> and add the 'Feature' label.
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">bug_report</i>Reporting Bugs</div>
					<div class="collapsible-body">
						<p>
							If you experience any bugs, open a <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">new issue</a> and send the bug report there, thank you.
						</p>
					</div>
				</li>
        <li>
          <div class="collapsible-header waves-effect"><i class="material-icons">group</i>Contacts</div>
          <div class="collapsible-body">
            <p>
              If you want to discuss or help with the app you can do so in the <a href="https://t.me/joinchat/BJf2dUoyFbTomvUGaslmCA">Telegram group</a>!
            </p>
          </div>
        </li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">warning</i>Attention!</div>
					<div class="collapsible-body">
						<p>
							The authors do not call to commit crimes!<br/>
							The usage of this tool may be illegal in your country, please inform yourself!<br/>
							The authors give no guarantees at all and aren't responsible for any damage or harm of any kind resulting from the use of this software!
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">history</i>Changelog</div>
					<div class="collapsible-body">
						<p>
							<b>Version 4.1.6</b><br/>
							- Fixed Spotify Playlist problem<br/>
							- Fixed security issue where Client Secret is exposed in Compiled binaries<br/>
							- Now to use Spotify Features you need to follow <a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Spotify+Features">this guide</a> first<br/>
							- Minor bugfixes and improvments<br/>
							<br/>
							<b>Version 4.1.5</b><br/>
							- Fixed %explicit% for album names<br/>
							- Added Contributions page<br/>
							- Fixed some spelling issues<br/>
							<br/>
							<b>Version 4.1.4</b><br/>
							- Improved Privacy in Server Mode<br/>
							- Cleaned up some files<br/>
							- Fixed Day Month position in DATE tag<br/>
							- Fixed %explicit% in name templates<br/>
							- Fixed artist download<br/>
							- Fixed FLAC Problems (not all of them)<br/>
							- Fixed select folder cancel bug<br/>
							- Added Update Notification<br/>
							- Added default ID3 DATE tag format<br/>
							- Added minimize to system tray<br/>
							- Added multitag separator for FLACS<br/>
							- Added hyperlinks to artist & album<br/>
							- Added option to better remove duplicates in the artist tag (Still in BETA)<br/>
							- Added option to save the track with the full list of artist in the filename<br/>
							- Added option to overwrite padding size<br/>
							- Added "Download All" button in modals<br/>
							- Removed ReplayGain as default setting<br/>
							<br/>
							<b>Version 4.1.3</b><br/>
							- Playlist and Album tracks now have fallback support<br/>
							- M3U files now works correctly<br/>
							- Fixed problems with tags<br/>
							- Added option %explicit% for Track and Album names (Will add "(Explicit)" in that position if it's explicit)<br/>
							- Added option to remove "(Album Version)" from track title<br/>
							- Added options to select which format should the date tag have<br/>
							- Added option to not fallback if desired bitrate is not aviable<br/>
							- Logging enhancements<br/>
							- Other minor bug-fixing<br/>
							<br/>
							<b>Version 4.1.2</b><br/>
							- Fixed Login Problem (for real this time)<br/>
							- Fixed Login after refresh<br/>
							- Regionlock free download<br/>
							- Added support for download of User Uploaded tracks<br/>
							- Now you can select which tags your songs has<br/>
							- Fixed selecting problem<br/>
							- Tracks without preview will display a disabled play button<br/>
							- Previews inside modal will stop with modal close<br/>
							- New %label% field for tracks and albums<br/>
							- Added option to create folder for CDs<br/>
							- Added rename option for cover file<br/>
							- Added option to download Artist artwork<br/>
							- Added option do log downloaded alternative tracks<br/>
							- Fixed some minor bugs<br/>
							<br/>
							<b>Version 4.1.1</b><br/>
							- Fixed Login Problem (again)<br/>
							- Added Dark Mode<br/>
							- Added smaller cover option<br/>
							- Added support for lower bitrates<br/>
							- Added "Stop All Downloads" button<br/>
							- Added support for Spotify Playlist preview<br/>
							- Added support for PNG covers<br/>
							- Re-Added Date Tag<br/>
							- Fixed same cover for same track in different albums bug<br/>
							- Fixed login issue from repository build<br/>
							<br/>
							<b>Version 4.1.0</b><br/>
							- New UI (not completly optimized for small screens)<br/>
							- Fixed login problems<br/>
							- Fixed %type% parameter not working<br/>
							- Fixed year tagging problem<br/>
							- Fixed playlist file not containing tracks<br/>
							- More precision in Spotify Playlist conversion<br/>
							<br/>
							<a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Changelog">Full Changelog Here</a>
						</p>
					</div>
				</li>
				<li>
					<div class="collapsible-header waves-effect"><i class="material-icons">copyright</i>License</div>
					<div class="collapsible-body">
						<p>
							<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">
								<img alt="GNU General Public License" style="border-width:0"
										 src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
							</a><br/>
							This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU General Public License 3.0</a>.
						</p>
					</div>
				</li>
        <li>
          <div class="collapsible-header waves-effect"><i class="material-icons">favorite</i>Contributions</div>
          <div class="collapsible-body">
            <h5>You want to contribute to this project? You can do that <b>in different ways!</b></h5>
            <p>If you know JavaScript, HTML, CSS or Node.js you could contribute writing code, fixing bugs and adding features using the <a href="https://notabug.org/RemixDevs/DeezloaderRemix">Official Repo</a>.</p>
            <p>If you are good at graphics and design you could help by submitting a new design, you can open a new issue with some design <a href="https://notabug.org/RemixDevs/DeezloaderRemix/issues/new">here</a>.<br>
            	<p>Keep in mind that we are (sorta) following the <a href="https://material.io/">Material Desing Principles</a>.</p>
            	If you are good at finding bugs you can help Beta Test the app before release.<br>
            	Join our <a href="https://t.me/joinchat/BJf2dUoyFbTomvUGaslmCA">Telegram Group</a> to be notified when betas come out!</p>
            <hr>
            <h5>You want to contribute monetarily? You could make a donation!</h5>
            <p>If you can donate you can do that with this links.<br>
              You shoud remember that <b>this is a free project</b> and <b>you should support the artists you love</b> before supporting the developer.<br>
              Don't feel obbligated to donate, I appreciate you anyway!</p>
            <p>
              PayPal: <a href="https://paypal.me/DeezloaderRemix">PayPal.me/DeezloaderRemix</a><br>
              Bitcoin: 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br>
              Ethereum: 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
            </p>
          </div>
        </li>
			</ul>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="modal-close waves-effect btn-flat">Close</a>
	</div>
</div>

<!--##########################################MODAL_TRACKLIST###########################################-->
<div id="modal_trackList" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">{{ title }}</h4>
		</div>
		<div class="row">
			<table class="highlight col s12">
				<thead>
				<tr>
					<td v-for="data in head" v-html="data.title"></td>
				</tr>
				</thead>
				<tbody id="modal_trackList_table_trackList_tbody_loadingIndicator" class="hide">
				<tr>
					<td class="center" colspan="4">
						<div class="preloader-wrapper big active">
							<div class="spinner-layer">
								<div class="circle-clipper left">
									<div class="circle"></div>
								</div>
								<div class="gap-patch">
									<div class="circle"></div>
								</div>
								<div class="circle-clipper right">
									<div class="circle"></div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				</tbody>
				<tbody id="modal_trackList_table_trackList_tbody_trackList" class="hide">
				</tbody>
			</table>
		</div>
	</div>
	<div class="modal-footer">
    <a href="#" id="download_all_tracks" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
		<a href="#" class="modal-close waves-effect btn-flat">Close</a>
	</div>
</div>

<!--##########################################MODAL_TRACKLISTALBUM###########################################-->
<div id="modal_trackListSelective" class="modal modal-fixed-footer">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12">{{ title }}</h4>
		</div>
		<div class="row">
			<table class="highlight col s12">
				<thead>
				<tr>
					<td v-for="data in head" v-html="data.title"></td>
				</tr>
				</thead>
				<tbody id="modal_trackListSelective_table_trackList_tbody_loadingIndicator" class="hide">
				<tr>
					<td class="center" colspan="4">
						<div class="preloader-wrapper big active">
							<div class="spinner-layer">
								<div class="circle-clipper left">
									<div class="circle"></div>
								</div>
								<div class="gap-patch">
									<div class="circle"></div>
								</div>
								<div class="circle-clipper right">
									<div class="circle"></div>
								</div>
							</div>
						</div>
					</td>
				</tr>
				</tbody>
				<tbody id="modal_trackListSelective_table_trackListSelective_tbody_trackListSelective" class="hide">
				</tbody>
			</table>
		</div>
	</div>
	<div class="modal-footer">
    <a href="#" id="download_all_tracks_selective" v-bind:data-link="link" class="btn btn-flat waves-effect waves-light left">Download {{ type }}</a>
		<a href="#" id="download_track_selection" class="btn btn-flat waves-effect waves-light deezloader-primary white-text">Download selection<i class="material-icons right">file_download</i></a>
		<a href="#" class="modal-close waves-effect btn-flat">Close</a>
	</div>
</div>

<!--##########################################MODAL_MSG###########################################-->
<div id="modal_msg" class="modal">
	<div class="modal-content">
		<div class="row">
			<h4 class="col s12" id="modal_msg_title"></h4>
		</div>
		<div class="row">
			<p style="white-space: pre-line" class="col s12" id="modal_msg_message"></p>
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="modal-close waves-effect waves-light btn">I got it!</a>
	</div>
</div>

<!--********************************************MAIN-CONTENT********************************************-->
<nav>
  <div class="nav-wrapper">
    <div class="brand-logo center hide-on-small-only">Deezloader <b>Remix</b></div>
    <ul class="left hide-on-small-only">
      <li>
        <div class="switch">
          <label>
            <i class="material-icons left white-text" style="margin-right: 0px; margin-left: 15px;">brightness_2</i>
            <input id="nightTimeSwitcher" type="checkbox">
            <span class="lever"></span>
          </label>
        </div>
      </li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger hide-on-med-and-up right"><i class="material-icons">menu</i></a>
    <ul id="nav-mobile" class="right hide-on-small-only">
      <li>
				<a href="#modal_settings" id="nav_btn_openSettingsModal" class="waves-effect waves-light modal-trigger">
					<i class="material-icons left">settings</i> <span class="hide-on-med-and-down">Settings</span>
				</a>
			</li>
			<li>
				<a href="#modal_about" class="waves-effect waves-light modal-trigger">
					<i class="material-icons left">star</i> <span class="hide-on-med-and-down">More</span>
				</a>
			</li>
    </ul>
  </div>
</nav>

<img src="img/icon.svg" class="circle" id="main_icon"></img>

<ul id="slide-out" class="sidenav">
  <li><div class="user-view">
    <div class="background"></div>
    <a href="#user"><img class="circle" id="side_avatar"></a>
    <a href="#name"><span class="white-text name" id="side_user"></span></a>
    <a href="#email"><span class="white-text email" id="side_email"></span></a>
  </div></li>
  <li><a href="#!" tab-id="tab_search" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">search</i>Search</a></li>
  <li><a href="#!" tab-id="tab_charts" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">bubble_chart</i>Charts</a></li>
  <li><a href="#!" tab-id="tab_playlists" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">playlist_play</i>Playlists</a></li>
  <li><a href="#!" tab-id="tab_url" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">link</i>Download from URL</a></li>
  <li><a href="#!" tab-id="tab_downloads" class="sidenav_tab sidenav-close waves-effect"><i class="material-icons">get_app</i>Downloads</a></li>
  <li><div class="divider"></div></li>
  <li><a href="#modal_settings" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">settings</i>Settings</a></li>
  <li><a href="#modal_about" class="waves-effect sidenav-close modal-trigger"><i class="material-icons">star</i>About</a></li>
  <li><a href="#!" id="nightModeSwitch2"><i class="material-icons">brightness_2</i>Enable Night Mode</a>
  </li>
</ul>

<main class="container">
  <ul id="tab-nav" class="row tabs tabs-fixed-width hide-on-small-only">
    <li class="tab"><a class="active" href="#tab_search">Search</a></li>
    <li class="tab"><a href="#tab_charts">Charts</a></li>
    <li class="tab"><a href="#tab_playlists">Playlists</a></li>
    <li class="tab"><a href="#tab_url">Download from URL</a></li>
    <li class="tab"><a href="#tab_downloads">Downloads</a></li>
  </ul>

  <div id="main-content" class="row">

    <div id="tab_search">
      <form id="tab_search_form_search">
        <div class="inline-input-group col s12">
          <input autocomplete="off" id="tab_search_form_search_input_searchString" type="text" class="input" placeholder="Start searching ...">
          <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">search</i></button>
        </div>
        <div class="row center">
          <p class="col s3">
            <label>
            <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_song" value="track" checked/>
            <span><i class="material-icons show-on-small-only left deezloader-primary-text">music_note</i><span class="hide-on-med-and-down">Song</span></span>
            </label>
          </p>
          <p class="col s3">
            <label>
            <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_album" value="album"/>
            <span><i class="material-icons show-on-small-only left deezloader-primary-text">album</i><span class="hide-on-med-and-down">Album</span></span>
            </label>
          </p>
          <p class="col s3">
            <label>
            <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_artist" value="artist"/>
            <span><i class="material-icons show-on-small-only left deezloader-primary-text">person</i><span class="hide-on-med-and-down">Artist</span></span>
            </label>
          </p>
          <p class="col s3">
            <label>
              <input name="searchMode" type="radio" class="with-gap" id="tab_search_radio_searchMode_playlist" value="playlist"/>
              <span><i class="material-icons show-on-small-only left deezloader-primary-text">playlist_play</i><span class="hide-on-med-and-down">Playlist</span></span>
            </label>
          </p>
        </div>
      </form>
      <div id="tab_search_results">
				<table id="tab_search_table_results" class="striped col s12">
					<thead class="hide-on-small-only">
  					<tr class="animated fadeInUp hide" id="tab_search_table_results_thead_track">
  						<th style="width: 56px;"><!--cover--></th>
  						<th>Song</th>
  						<th>Artist</th>
  						<th>Album</th>
  						<th><i class="material-icons">timer</i></th>
  						<th style="width: 56px;"><!--download_link--></th>
  					</tr>
  					<tr class="animated fadeInUp hide" id="tab_search_table_results_thead_album">
  						<th style="width: 56px;"><!--cover--></th>
  						<th>Album</th>
  						<th>Artist</th>
  						<th>Songs</th>
  						<th>Type</th>
  						<th><!--space--></th>
  						<th style="width: 56px;"><!--download_link--></th>
  					</tr>
  					<tr class="animated fadeInUp hide" id="tab_search_table_results_thead_artist">
  						<th style="width: 56px;"><!--cover--></th>
  						<th>Artist</th>
  						<th>Albums</th>
  						<th><!--space--></th>
  						<th style="width: 56px;"><!--download_link--></th>
  					</tr>
  					<tr class="animated fadeInUp hide" id="tab_search_table_results_thead_playlist">
  						<th style="width: 56px;"><!--cover--></th>
  						<th>Name</th>
  						<th>Songs</th>
              <th style="width: 56px;"><!--space--></th>
  						<th style="width: 56px;"><!--download_link--></th>
  					</tr>
					</thead>
					<tbody id="tab_search_table_results_tbody_loadingIndicator" class="hide loadingTab">
  					<tr>
  						<td class="center">
							  <div class="preloader-wrapper big active">
							    <div class="spinner-layer spinner-blue-only">
							      <!-- Spinner Code -->
							      <div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
							    </div>
							  </div>
  						</td>
  					</tr>
					</tbody>
					<tbody id="tab_search_table_results_tbody_results" class="animated fadeInUp"></tbody>
					<tbody id="tab_search_table_results_tbody_noResults" class="animated fadeInUp hide">
  					<tr>
  						<td class="center">Nothing found!</td>
  					</tr>
					</tbody>
				</table>
			</div>
    </div>

    <div id="tab_charts">
      <div class="input-field col s12">
        <select id="tab_charts_select_country" class="icons">
          <!--All country selects have to be like the following example:
          <option value="example" data-icon="images/sample.jpg" class="left circle">Example</option>
          -->
        </select>
        <label>Country</label>
      </div>
      <button id="downloadChartPlaylist" class="col s12 btn btn-input btn-flat deezloader-primary white-text" style="margin-bottom:8px;">Download Playlist</button>
      <table id="tab_charts_table_charts" class="striped">
        <thead class="hide-on-small-only">
          <tr>
            <th>#</th>
            <th style="width: 56px;"><!--cover--></th>
            <th>Song</th>
            <th>Artist</th>
            <th>Album</th>
            <th><i class="material-icons">timer</i></th>
            <th style="width: 56px;"><!--download_link--></th>
          </tr>
        </thead>
        <tbody id="tab_charts_table_charts_tbody_loadingIndicator" class="loadingTab">
          <tr>
            <td colspan="7" class="center">
							<div class="preloader-wrapper big active">
							  <div class="spinner-layer spinner-blue-only">
							    <!-- Spinner Code -->
							    <div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div>
							  </div>
							</div>
            </td>
          </tr>
        </tbody>
        <tbody id="tab_charts_table_charts_tbody_charts"></tbody>
      </table>
    </div>

    <div id="tab_playlists" class="row">
      <div class="col s12">
        <button class="btn-flat btn-large waves-effect deezloader-primary white-text" id="button_refresh_playlist_tab" style="width:100%;">Refresh Playlists</button>
      </div>
      <div class="col s12">
        <table class="striped">
          <thead>
            <tr class="animated fadeInUp">
              <th style="width: 56px;"><!--cover--></th>
              <th>Name</th>
              <th>Songs</th>
              <th style="width: 56px;"><!--inspect_playlist--></th>
              <th style="width: 56px;"><!--download_link--></th>
            </tr>
          </thead>
          <tbody id="table_personal_playlists" class="animated fadeInUp">
          </tbody>
        </table>
      </div>
    </div>

    <div id="tab_url">
      <form id="tab_url_form_url" class="row">
        <div class="inline-input-group">
          <input autocomplete="off" type="text" id="song_url" class="input" placeholder="Song/Playlist/Album/Artist URL, separated by ';'">
          <button class="btn btn-input btn-flat deezloader-primary white-text"><i class="material-icons">get_app</i></button>
        </div>
      </form>
    </div>

    <div id="tab_downloads">
      <div class="row">
        <div class="col s12 m4">
          <button id="openDownloadsFolder" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
            Open Downloads Folder
          </button>
        </div>
        <div class="col s12 m4">
          <button id="cancelAllTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
            Cancel All Downloads
          </button>
        </div>
        <div class="col s12 m4">
          <button id="clearTracksTable" style="width: 100%; margin-bottom:8px;" class="btn btn-flat btn-input btn-block deezloader-primary white-text">
            Clear List
          </button>
        </div>
      </div>
      <table id="tab_downloads_table_downloads" class="row">
        <thead>
          <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Downloaded</th>
            <th>Failed</th>
            <th style="width: 25%;"><!--progress--></th>
            <th style="width: 56px;"><!--event buttons--></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

  </div>
</main>

<div class="fixed-action-btn" id="btn_scrollToTop" style="bottom: 45px; right: 24px;">
  <a class="btn-floating btn-large deezloader-primary scale-transition scale-out">
    <i class="large material-icons">keyboard_arrow_up</i>
  </a>
</div>
<audio id="preview-track">
  <source id="preview-track_source" src="" type="audio/mpeg">
</audio>

<footer class="deezloader-black darken-1 left page-footer hide-on-med-and-down valign-wrapper">
      <p><span style="position: relative;display: inline-block;transform: rotateY(180deg);">&copy;</span> Deezloader original code by ZzMTV.</p>
</footer>

<script>if (typeof module === 'object') {
	window.module = module;
	module = undefined;
}</script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/appBase.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>if (window.module) module = window.module;</script>
</body>
</html>
